<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>02_tabCard</title>
	<style>
		#konwledege{
			position: fixed;
			right: 2%;
			top:2%;
			text-decoration:underline;
			color:inherit;
			outline: none;
			color: orange;
			font-size: 12px;
		}
		#toTop{
			position: fixed;
			right: 2%;
			bottom: 2%;
			box-shadow: 1px 1px 1px rgba(0,0,0,.5);
			border-radius: 100%;
			width: 40px;
			height: 40px;
			line-height: 40px;
			font-size: 12px;
			text-align: center;
			color: red;
		}
		*{margin:0;padding: 0;}
		body{
			font-family: 'Microsoft yahei', Verdana, '仿宋',Arial, Helvetica, sans-serif;
			font-size: 18px;
			max-width: 1000px;
			margin: 50px auto;
			position: relative;
			padding-bottom: 10px;
			display: flex;
			flex-flow:row nowrap;

		}
		a{text-decoration:none;color:inherit;outline: none;}
		img{border:none;vertical-align: middle;outline:none;}
		li{list-style:none;}
		
		.tab-wrap{
			margin: 25px;
			padding: 20px;
			box-shadow: 3px 6px 20px rgba(226, 21, 21, 0.75);
			display: flex;
			flex-flow:column wrap;
			height: 250px;
		}
		.tab-wrap>nav{
			display: flex;
			justify-content:flex-start;
		}
		.tab-wrap a{
			position: relative;
			top:0;
			height: 60px;
			width: 80px;
			padding: 8px;
			margin-left: 15px;
			line-height: 40px;
			text-align: center;
			background-color: #abcdef;
			transition:.5s;
		}
		.tab-wrap a:active{
			background-color: green;
			color: #fff;
			top:-5px;
		}
		.tab-wrap a:hover{
			background-color: green;
			color: #fff;
			top:-5px;
		}
		.tab-wrap>ul{
			position: relative;
			height: 120px;
		}
		.tab-wrap>ul>li{
			z-index: 2;
			position: absolute;
			top:-10px;
			padding: 15px;
			padding-bottom: 50px;
			color: #AB0B64;
			background-color: #eee;
			height: 80px;
			font-size: 14px;
			/*opacity: 0;*/
			/*transition:opacity .5s;	*/
			/*多行省略*/		
			/*display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;*/
		}
		.tab-wrap>ul>li:nth-of-type(2){
			z-index: 9;
			/*opacity: 0;*/
		}
		.tab-wrap>ul>li:target{
			z-index: 99;
			/*opacity: 1;*/
		}
		section{
			position:relative;
			margin:25px 0;
			width:100%;
			height:300px;
		}
		section>ul{
			position: relative;
			height: 100%;
			width:100%;
			box-shadow:5px 5px 50px rgba(0,0,0,.8);
		}
		section>ul li{
			position: absolute;
			width: 100%;
			height: 100%;			
			opacity: 0;
			transition:.5s;
		}
		section>ul>input[type='radio']:checked + label>li{
			opacity: 1;
		} 
		section>ul>input{
			position: relative;
			top:-20px;
			display: none;
		}
		section ol{
			position: absolute;
			bottom: 20px;
			left: 50%;
			margin-left: -98px;
			display: flex;
			z-index: 999;	
		}
		section ol a{
			display: block;
			margin: 0 10px;
			height: 20px;
			width: 20px;
			border-radius: 100%;
			overflow: hidden;
			cursor: pointer;
			background-color: transparent;
			transition:background-color .5s;
			box-shadow: 2px 2px 20px rgba(255,123,98,.8);
		}
		section ol li{
			height: 20px;
			width: 20px;
			border-radius: 100%;
			background-color: #ccc;
			transition:background-color .5s;
			box-shadow: 2px 2px 20px rgba(255,123,98,.8);
		}
		section ol li:target{
			background-color: orange;
		}
	</style>
</head>
<body>
	<div id="konwledege"><a href="baseKnowledege.html" target="_self">基本知识</a></div>
	<a href="#" id='toTop'>Top</a>
	<div class="tab-wrap">
		<nav>
			<a href="#item0">三国演义</a>
			<a href="#item1">水浒传</a>
			<a href="#item2">西游记</a>
			<a href="#item3">红楼梦</a>
		</nav>
		<ul>
			<li id='item0' >
				该剧演述的是三国时代的故事，是魏、蜀、吴的兴亡史，共分为五大部分。着重表现的是乱世中多个政治集团间错综复杂、紧张尖锐的斗争;这种斗争发展成为连接不断的对政治权力的争夺和军事冲突，造就了从东汉末年到西晋初年将近一个世纪中的风云变幻。
			</li>
			<li id='item1' class="on">
				该剧讲述宋仁宗时，洪太尉奉天子之命前往龙虎山寻找张天师祈禳瘟疫，办完事后，洪太尉在龙虎山游山观景，在伏魔之殿里误放前代老祖天师镇锁着的三十六员天罡星，以及七十二员地煞星的故事。
			</li>
			<li id='item2'>
				作为中国古代第一部浪漫主义长篇神魔小说，该书深刻地描绘了当时的社会现实，是魔幻现实主义的开创作品。先写了孙悟空出世，然后遇见了唐僧、猪八戒和沙和尚三人，但还是主要描写了孙悟空、猪八戒、沙和尚三人保护唐僧西行取经，唐僧从投胎到取经受了九九八十一难，一路降妖伏魔，九九归一，终于到达西天见到如来佛祖，最终五圣成真。
			</li>
			<li id='item3'>
				《红楼梦》是一部具有高度思想性和艺术性的伟大作品，作为一部成书于封建社会晚期，清朝中期的文学作品，该书系统总结了中国封建社会的文化、制度，对封建社会的各个方面进行了深刻的批判，并且提出了朦胧的带有初步民主主义性质的理想和主张。这些理想和主张正是当时正在滋长的资本主义经济萌芽因素的曲折反映。
			</li>
		</ul>
	</div>
	<section>
		<ul>
			<input type="radio" name='check' id=r1 checked>
			<label for="r1">
				<li>
					<img width='100%' height="100%" src="http://bbs.cnliti.com/data/attachment/forum/201506/19/202537obyxrayax5xzyf9d.jpg" alt="">
				</li>
			</label>
			<input type="radio" name='check' id=r2>
			<label for="r2">
				<li>
					<img width='100%' height="100%" src="http://attach.bbs.miui.com/forum/201410/25/220832wlwzqq6ble9ql6rd.jpg" alt="">
				</li>
			</label>
			<input type="radio" name='check' id=r3>
			<label for="r3">
				<li>
					<img width='100%' height="100%" src="http://attach.bbs.miui.com/forum/201502/03/150921dx9qaamw4kws9st4.jpg" alt="">
				</li>
			</label>
			<input type="radio" name='check' id=r4>
			<label for="r4">
				<li>
					<img width='100%' height="100%" src="http://attach.bbs.miui.com/forum/201501/31/161118mdnbnir5j265lg55.jpg" alt="">
				</li>
			</label>
			<input type="radio" name='check' id=r5>
			<label for="r5">
				<li>
					<img width='100%' height="100%" src="http://attach.bbs.miui.com/forum/201501/31/141655tpddqpkx24xlkxld.jpg" alt="">
				</li>
			</label>
		</ul>
		<ol>
			<a href="#s1"><label for="r1"><li id='s1'></li></label></a>
			<a href="#s2"><label for="r2"><li id='s2'></li></label></a>
			<a href="#s3"><label for="r3"><li id='s3'></li></label></a>
			<a href="#s4"><label for="r4"><li id='s4'></li></label></a>
			<a href="#s5"><label for="r5"><li id='s5'></li></label></a>

			<!-- <label for="r1"><li id='s1'></li></label>
			<label for="r2"><li id='s2'></li></label>
			<label for="r3"><li id='s3'></li></label>
			<label for="r4"><li id='s4'></li></label>
			<label for="r5"><li id='s5'></li></label> -->
			<!-- <label for="r1"><a href="#s1"><li id='s1'></li></a></label>
			<label for="r2"><a href="#s2"><li id='s2'></li></a></label>
			<label for="r3"><a href="#s3"><li id='s3'></li></a></label>
			<label for="r4"><a href="#s4"><li id='s4'></li></a></label>
			<label for="r5"><a href="#s5"><li id='s5'></li></a></label> -->
		</ol>
	</section>
	<script>
		
	</script>
</body>
</html>